<template>
  <div class="wrapper-right">
    <Title title="小区营销服务活动开展情况" />
    <div class="content">
      <div
        class="content-item"
        v-for="(item, index) in planList"
        :key="index"
        :style="{ background: item.color }"
        @click="handleItemClick(item.type, item.title)"
      >
        <div class="content-item-value">
          <span :style="{ color: item.txtColor }">{{ item.value }}</span> <span class="unit"></span>
        </div>
        <div class="content-item-title" :style="{ color: item.txtColor }">{{ item.title }}</div>
      </div>
    </div>
    
    <!-- 小区列表弹窗 -->
    <CommunityListDialog ref="communityDialog" />
  </div>
</template>

<script>
import { countByRanking } from "@/api/home";
import { getDeptTree } from "@/api/system/user";
import { leftList, getCommunityStatistics } from "@/api/system/target";
import { listConfig } from "@/api/system/configs"
import Title from "../Title";
import CommunityListDialog from "./CommunityListDialog";
import store from "@/store";
export default {
  name: "HomeRight",
  components: { Title, CommunityListDialog },
  data() {
    return {
      postData: {
        // deptId: 219,
        deptId: store.state.user.deptId, //将缓存的用户id赋值给userId，用于查询营销人员
        status: 0,
        delFlag: 0,
      },
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      planList: [
        { title: "计划开展小区", value: 0, color: "#ecf5ff", txtColor: "#409eff", type: "planned" },
        { title: "已经开展小区", value: 0, color: "#e7faf0", txtColor: "#13ce66", type: "completed" },
        { title: "未开展小区", value: 0, color: "#ffeded", txtColor: "#ff4949", type: "unstarted" },
      ],
    };
  },
  created() {
    // this.getDeptTree(100);
    // this.countByRanking({ deptId: 100 });
    // this.getListConfig(this.queryParams);
    this.loadStatistics();
  },
  methods: {
    // 加载统计数据
    loadStatistics() {
      getCommunityStatistics().then((response) => {
        if (response.code === 200 && response.data) {
          this.planList[0].value = response.data.planned || 0;  // 计划开展
          this.planList[1].value = response.data.completed || 0; // 已经开展
          this.planList[2].value = response.data.unstarted || 0; // 未开展
        }
      }).catch((error) => {
        console.error("获取统计数据失败:", error);
        this.$message.error("获取统计数据失败");
      });
    },
    
    // 处理点击事件
    handleItemClick(type, title) {
      this.$refs.communityDialog.show(type, title + "列表");
    },
    
    getListConfig(queryParams) {
      listConfig(queryParams).then((res) => {
        let tempData = res.rows[0];
        this.planList[0].value = tempData.backendTarget;
        this.planList[1].value = tempData.frontendTarget;
        this.planList[2].value = tempData.createBy;
        // this.tableData = res.data;
      });
    },
    /** 查询部门下拉树结构 */
    async getDeptTree(deptId) {
      getDeptTree({ deptId: deptId }).then((response) => {
        var treeData = response.data.children;

        if (deptId == 100) {
          this.salesDepartmentList = [
            {
              deptName: response.data.deptName,
              deptId: response.data.deptId,
            },
            {
              deptName: response.data.children[0].deptName,
              deptId: response.data.children[0].deptId,
            },
            {
              deptName: response.data.children[1].deptName,
              deptId: response.data.children[1].deptId,
            },
          ];

          console.log(this.salesDepartmentList, "树结构");
          // this.deptOptions = treeData;
        } else {
          this.baoQuListR = response.data.children;
        }
      });
    },
    countByRanking(data) {
      countByRanking(data).then((response) => {
        console.log(response.data, "小区业务数据统计排名");
        response.data.sort((a, b) => {
          return (
            b.percent.substring(0, b.percent.length - 1) -
            a.percent.substring(0, a.percent.length - 1)
          );
        });
        response.data.forEach((item, index) => {
          /*  this.tableData.push({
              rank: index + 1,
              community: item.deptName,
              accomplish: item.percent,
              isOk: item.finished,
           }); */
        });
      });
    },
    //时间切换
    handleCommunityTime() {
      this.$message("数据完善中...");
    },
    //包区数据选中
    handleCommunityBusinessBaoquChange(value) {
      this.tableData = [];
      this.countByRanking({ deptId: value });
    },
    //小区业务数据统计排名
    handleCommunityBusinessChange(value) {
      this.baoQuListR = [];
      this.tableData = [];
      this.communityBusiness.baoQu = "";
      this.postData.deptId = value;
      this.countByRanking({ deptId: value });
      this.getDeptTree(value);
    },
    getRanking(rank) {
      if (rank == "1") {
        return "first";
      } else if (rank == "2") {
        return "second";
      } else if (rank == "3") {
        return "third";
      } else {
        return "other";
      }
    },
  },
};
</script>

<style scoped lang="scss">
.wrapper-right {
  width: 100%;
  height: 100%;

  .content {
    width: 100%;
    height: 68%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .content-item {
      width: 32%;
      height: 100%;
      line-height: 28px;
      // padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
      .content-item-title {
        font-size: 16px;
        color: #333;
        // font-weight:600;
      }
      .content-item-value {
        font-weight: 600;
        font-size: 28px;
        display: flex;
        align-items: center;
        .unit {
          font-size: 18px;
        }
      }
    }
  }
}
</style>
